import LightDot from '@/assets/light-dot.png';
import LightLine from '@/assets/light-line.png';
import { ReactNode } from 'react';

import { Slider } from 'react-vant';

export default function useRoundDrag(props: {
  total: number;
  progress: number;
  disabled?: boolean;
  onSetProgress?: Function;
  onChangeAfter?: Function;
  label: ReactNode;
}) {
  function renderNode() {
    return (
      <>
        <div className="w-[374px] h-[110px] relative" id="dragContainer">
          <div className=" text-white text-[24px] text-center pt-[62px] animate-pulse">
            {props.label}
          </div>
          <div
            className="w-full h-[110px] bg-no-repeat bg-center absolute left-0 right-0 top-0"
            style={{
              backgroundImage: `url(${LightLine})`,
              backgroundSize: '100% 100%',
            }}
          ></div>

          {/* round */}
          <div
            className="rounded-full w-[470px] -ml-[calc(470px/2)] h-[470px] absolute left-1/2 top-[12px]"
            style={{
              transform:
                props.progress === 1
                  ? `rotate(0deg)`
                  : `rotate(${80 * (props.progress / props.total)}deg)`,
            }}
          >
            {/* dot */}
            <b
              className="w-[34px] h-[34px] absolute left-[70px] top-[40px]"
              style={{
                backgroundImage: `url(${LightDot})`,
                backgroundSize: '100% 100%',
              }}
            ></b>
          </div>

          {/* Slider  */}
          <div className=" absolute left-[50px] right-[50px] top-1/2 opacity-0">
            <Slider
              disabled={props.disabled}
              buttonSize={200}
              value={props.progress}
              max={props.total}
              min={1}
              onChange={(v: number) => props?.onSetProgress && props.onSetProgress(v)}
              onChangeAfter={(v: number) =>
                props.onChangeAfter && props.onChangeAfter(v)
              }
            ></Slider>
          </div>
        </div>
      </>
    );
  }

  return {
    renderNode,
  };
}
